<!--
 * @Author: 夏之一周
 * @Date: 2024-05-09 11:09
 * @Description: 
 * @LastEditors: 夏之一周 <https://wudetian.top>
 * @LastEditTime: 2024-05-09 16:00
-->
<template>
  <div>
    <ul class="app">
      <li>
        <h4>审批编号</h4>
        <h5>{{ mydata.id }}</h5>
      </li>
      <li>
        <h4>所在部门</h4>
        <h5>{{ mydata.college }}-学生-{{ mydata.boos1name }}-{{ mydata.class }}</h5>
        <div class="dowhat">
          <span>明细</span>
          <h3>【离校】病假 {{ longtime }} 小时</h3>
          <span class="left">
            <p></p>
            <p></p>
          </span>
          <p class="right">
            {{ mydata.startTime.replace("T", " ") }}<br />
            {{ mydata.endTime.replace("T", " ") }}
          </p>
        </div>
      </li>
      <li>
        <h4>请假事由</h4>
        <h5>{{ mydata.cause }}</h5>
      </li>
      <li>
        <h4>目的地（详细地址）</h4>
        <h5>河南省,{{ mydata.addresscity }},{{ mydata.addressdata }}</h5>
      </li>
      <li>
        <h4>个人自拍照</h4>
        <div class="zipai">
          <img
            :src="myPic"
            @click="
              $router.push({
                name: 'my',
                params: {
                  img: myPic,
                },
              })
            "
          />
        </div>
      </li>
      <li>
        <h4>紧急联系人姓名</h4>
        <h5>{{ mydata.friend }}</h5>
      </li>
      <li>
        <h4>联系人关系</h4>
        <h5>{{ mydata.relation }}</h5>
      </li>
      <li>
        <h4>联系人电话</h4>
        <h5 style="color: #0c87e9; font-width: 600">+86-{{ mydata.phone }}</h5>
        <p style="color: #e47967; font-size: 13px; padding: 1vh 0">本人承诺上述填写内容真实，并保证在请假期间严格遵守法律法规,对自己的安全负责，如出现问题，由本人负责。按时返校，及时销假。</p>
      </li>
      <li>
        <h4>手写签名</h4>
        <img class="qianming" :src="mydata.mysign" />
      </li>
      <!-- <hr />
      <li class="app">
        <p>查看TA的历史记录</p>
      </li> -->
      <p class="jilu">查看TA的历史记录 <span></span></p>
    </ul>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "Mydata",
  props: ["mydata"],
  computed: {
    myPic() {
      return api.baseURL + "ding/" + this.mydata.picture;
    },
    longtime() {
      const endTime = Date.parse(this.mydata.endTime);
      const startTime = Date.parse(this.mydata.startTime);
      let s = Math.floor(((((endTime - startTime) / 1000 / 60) % 60) / 60) * 100);
      s = s < 10 ? "0" + s : s;
      const m = Math.floor((endTime - startTime) / 1000 / 60 / 60);
      console.log(s, m);
      return `${m}.${s}`;
    },
  },
};
</script>

<style>
.app .dowhat {
  position: relative;
  margin-top: 2vh;
  margin-bottom: 0.5vh;
  height: 13vh;
  border-radius: 16px;
  background-color: #f2f1f6;
}

.app .dowhat span {
  position: absolute;
  font-size: 1.4vh;
  right: 4vw;
  top: 2vh;
}

.app .dowhat span:nth-of-type(1) {
  color: #4095e9;
}

.app .dowhat .left {
  position: absolute;
  left: 5vw;
  top: 7vh;
  height: 2.6vh;
  background: url(../../public/images/keep/竖杠.png) no-repeat -0.2vh 0.6vh;
  background-size: 1.3vh;
}

.app .dowhat .left p {
  position: absolute;
  float: left;
  width: 0.6vh;
  height: 0.6vh;
  background: #babdbd;
  border-radius: 1vh;
}

.app .dowhat .left p:nth-of-type(1) {
  top: -0.2vh;
  left: 0.15vw;
}

.app .dowhat .left p:nth-of-type(2) {
  top: 2.8vh;
  left: 0.15vw;
}

.app .dowhat .right {
  position: absolute;
  top: 5.6vh;
  left: 9.8vw;
  font-size: 1.7vh;
  line-height: 3.1vh;
  color: #999999;
}

.app .dowhat h3 {
  position: absolute;
  font-size: 2vh;
  font-weight: 500;
  left: 6vw;
  top: 2vh;
}
.zipai {
  margin-top: 4px;
  margin-bottom: 1vh;
  width: 7.6vh;
  height: 7.6vh;
  overflow: hidden;
}

.zipai img {
  width: 100%;
  transform: translate3d(0, -24%, 0);
}
.app .qianming {
  height: 8vh;
  width: 20vh;
}

.jilu {
  position: relative;
  border-top: 1px solid rgb(212, 212, 212);
  margin: 0 -3vw;
  margin-top: 1vh;
  text-indent: 3vw;
  width: 100vw;
  padding-top: 1.4vh;
  padding-bottom: 0.7vh;
}

.jilu span {
  position: absolute;
  right: 6vw;
  top: 2vh;
  width: 2vw;
  height: 2vw;
  border-bottom: #666666 1px solid;
  border-right: #666666 1px solid;
  transform: rotate(-45deg);
}
</style>
